@import '_variables'

*,
*:before,
*:after
  box-sizing: border-box

html, body
  width: 100vw
  height: 100%

body
  background-color: $color-bg
  color: $color-fg
  margin: 0
  font-family: $font-sans-serif
  min-height: 100%
  padding-bottom: 3rem
  position: relative
  overflow-x: hidden

footer
  position: absolute
  padding: 1rem 0
  bottom: 0
  left: 0
  right: 0
  text-align: center

body.call
  background-image: url('../res/peer-calls.svg')
  background-size: 200px
  background-position: 50% 50%
  background-repeat: no-repeat
  background-blend-mode: soft-light
  padding: 0
  display: flex

#github-ribbon
  position: absolute
  top: 0
  right: 0
  border: 0

@mixin button-style($color-fg, $color-bg)
  background: $color-bg
  border: none
  border-bottom: 2px solid darken($color-bg, 10%)
  border-radius: 4px
  box-sizing: border-box
  color: $color-fg
  // font-size: 1.2rem
  text-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.6)

@mixin button($color-fg, $color-bg)
  @include button-style($color-fg, $color-bg)
  cursor: pointer

  &:hover
    outline: none
    @include button-style($color-fg, darken($color-bg, 5%))

  &:focus
    outline: none
    box-shadow: 0 0 1rem rgba(black, 0.4)

  &:active:not(disabled)
    outline: none
    transform: translate(0px, 1px)
    @include button-style($color-fg, darken($color-bg, 10%))

  &:disabled
    pointer-events: none
    @include button-style(darken($color-fg, 13%), darken($color-bg, 13%))

#form
  padding-top: 50px
  text-align: center
  width: 300px
  margin: 0 auto

  h1
    margin: 0
    line-height: 0

  p
    margin: 50px 0
    color: $color-primary

  input[type="text"]
    font-size: 1.2rem
    padding: 1rem 0rem 0.75rem
    width: 100%
    margin-bottom: 1rem
    background: none
    border: none
    border-bottom: 2px solid rgba($color-warning, 0)
    transition: border-bottom 200ms ease-in
    text-align: center
    color: white
    position: relative

    &:focus
      border-bottom: 2px solid $color-warning
      outline: none

  input[type="submit"]
    font-family: $font-monospace
    @include button($color-primary, $color-warning)
    font-size: 1.2rem
    padding: 1rem 1rem

  ::-webkit-input-placeholder
    color: $color-fg
    text-align: center

  // Firefox 18
  :-moz-placeholder
    color: $color-fg
    text-align: center

  // Firefox 19+
  ::-moz-placeholder
    color: $color-fg
    text-align: center

  :-ms-input-placeholder
    color: $color-fg
    text-align: center

.warning
  color: $color-warning

.error
  color: $color-error

.info
  color: $color-info

#container
  display: flex
  flex: 1 1 100%

.app
  display: flex
  flex: 1 1 100%

  @import '_alert'
  @import '_notification'
  @import '_video'
  @import '_sidebar'
  @import '_chat'
  @import '_users'
  @import '_media'
  @import '_message'
  @import '_toolbar'
  @import '_vu_meter'

@import '_dropdown'

.fade-enter
  opacity: 0.01

.fade-enter.fade-enter-active
  opacity: 1
  transition: opacity 200ms ease-in

.fade-exit
  opacity: 1

.fade-exit.fade-exit-active
  opacity: 0.01
  transition: opacity 100ms ease-in

// TODO rename to sidebar-visible
.app .chat-visible
  right: 320px

  @media (max-width: 375.98px)
    right: 100%

noscript
  position: absolute
  left: 50%
  top: 1rem
  transform: translateX(-50%)
  color: $color-error
  font-weight: 300
  font-size: 1.6rem
